@import "_settings"
$mobile-bar-height = 40px
$vs-banner-height-desktop = 72px
$vs-banner-height-mobile = 72px
$menu-height = 63px

body.has-vs-banner
  padding-top: $vs-banner-height-mobile
  @media (min-width: 680px)
    padding-top: $vs-banner-height-desktop

  #mobile-bar
    top: $vs-banner-height-mobile
    @media (min-width: 680px)
      top: $vs-banner-height-desktop

  .sidebar
    top: $vs-banner-height-mobile + $mobile-bar-height
    @media (min-width: 680px)
      top: $vs-banner-height-desktop + $mobile-bar-height
    @media (min-width: 900px)
      top: $vs-banner-height-desktop + $menu-height

  .content
    padding-top: 85px
    @media (min-width: 680px)
      padding-top: 125px
    @media (min-width: 900px)
      padding-top: 35px

  &.docs
    @media (min-width: 900px)
      padding-top: 144px

    #vs-top
      position: fixed

    #header
      top: $vs-banner-height-mobile
      @media (min-width: 680px)
        top: $vs-banner-height-desktop

    #sidebar-sponsors-platinum-right
      @media (min-width: 900px)
        top: 160px

#vs-top.vs-hidden {
  display: none;
}

/*******************************************************/

#vs-top {
  display: block;
  box-sizing: border-box;
  height: 72px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  line-height: 1;
}

#vs-top .vs-background-wrapper {
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 0 10px;
  height: 100%;
  width: 100%;
}

#vs-top:hover {
  text-decoration: none;
}

#vs-top:hover .vs-core .vs-button {
  background-image: linear-gradient(to bottom, #5ccc45, #419E2D), linear-gradient(to bottom, #388f26, #50b83b);
}

#vs-top .vs-logo {
  position: absolute;
  left: 10px;
  width: 36px;
  height: 42px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#vs-top .vs-core {
  display: flex;
  align-items: center;
  width: 288px;
}

#vs-top .vs-core .vs-slogan-wrapper {
  text-align: center;
  width: 184px;
  margin: 0 auto;
}

#vs-top .vs-core .vs-slogan {
  font-weight: bold;
  font-size: 12px;
  font-family: 'Roboto', Arial, sans-serif;
}

#vs-top .vs-core .vs-subline {
  font-size: 10px;
  font-family: 'Roboto', Arial, sans-serif;
  text-align: center;
}

#vs-top .vs-core .vs-button-wrapper {
  padding: 2px;
  background-image: linear-gradient(to bottom, #388f26, #50b83b);
  border-radius: 60px;
  overflow: hidden;
}

#vs-top .vs-core .vs-button {
  background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b);
  border-radius: 60px;
  color: #FFF;
  padding: 8px 6px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

#vs-top .vs-close {
  right: 0;
  position: absolute;
  padding: 10px;
}

#vs-top .vs-close:hover {
  color: #56d8ff;
}

@media (min-width: 680px) {
  #vs-top .vs-core {
    width: auto;
  }

  #vs-top .vs-core .vs-slogan-wrapper {
    margin: 0 12px 0 0;
    width: 288px;
  }

  #vs-top .vs-core .vs-slogan {
    font-size: 17px;
  }

  #vs-top .vs-core .vs-subline {
    font-size: 12px;
    margin-top: 4px;
  }

  #vs-top .vs-core .vs-button {
    font-size: 13px;
    padding: 8px 15px;
  }
}

@media (min-width: 1280px) {
  #vs-top .vs-logo {
    left: 20px;
    width: 104px;
  }

  #vs-top .vs-core {
    margin-right: 0;
  }

  #vs-top .vs-core .vs-slogan-wrapper {
    width: auto;
  }

  #vs-top .vs-core .vs-subline {
    font-size: 15px;
  }
}

/* FREE_WEEKEND
******************************************/

#vs-top.FREE_WEEKEND {
  color: #FFF;
  background: linear-gradient(to left, #161a35, #283065);
}

#vs-top.FREE_WEEKEND .vs-logo {
  background-image: url('https://vueschool.io/images/mark-vueschool-white.svg');
}

#vs-top.FREE_WEEKEND .vs-core .vs-slogan {
  color: #fff;
}

#vs-top.FREE_WEEKEND .vs-core .vs-slogan strong {
  color: #ff2556;
}

#vs-top.FREE_WEEKEND .vs-core .vs-subline {
  color: #c6cdf7;
}

#vs-top.FREE_WEEKEND .vs-background-wrapper {
  background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-mobile.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

@media (min-width: 680px) {
  #vs-top.FREE_WEEKEND .vs-background-wrapper {
    background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-tablet.svg');
  }
}

@media (min-width: 1280px) {
  #vs-top.FREE_WEEKEND .vs-logo {
    background-image: url('https://vueschool.io/images/icons/logo-white.svg');
  }

  #vs-top.FREE_WEEKEND .vs-background-wrapper {
    background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-desktop.svg');
    background-position: top right -60px;
  }
}

/* LEVELUP2022
******************************************/

#vs-top.LEVELUP2022 {
  color: #121733;
  background: #EEF5FF;
}

#vs-top.LEVELUP2022 .vs-logo {
  background-image: url('https://vueschool.io/images/mark-vueschool.svg');
}

#vs-top.LEVELUP2022 .vs-core .vs-slogan {
  color: #121733;
}

#vs-top.LEVELUP2022 .vs-core .vs-slogan strong {
  color: #ff2556;
}

#vs-top.LEVELUP2022 .vs-core .vs-subline {
  color: #394170;
}

#vs-top.LEVELUP2022 .vs-core .vs-subline strong {
  color: #48aa34;
}

#vs-top.LEVELUP2022 .vs-background-wrapper {
  background-image: url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-mobile.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}

#vs-top.LEVELUP2022 .vs-core .vs-button-wrapper {
  background-image: linear-gradient(to bottom, #d71b46, #fd2455);
}

#vs-top.LEVELUP2022 .vs-core .vs-button {
  background-image: linear-gradient(to bottom, #ff2556, #d51b44), linear-gradient(to bottom, #d71b46, #fd2455);
}

@media (min-width: 680px) {
  #vs-top.LEVELUP2022 .vs-background-wrapper {
    background-image: url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-tablet.png');
  }

  #vs-top.LEVELUP2022 .vs-core .vs-slogan-wrapper {
    width: 458px;
  }
}

@media (min-width: 1280px) {
  #vs-top.LEVELUP2022 .vs-logo {
    background-image: url('https://vueschool.io/images/icons/logo.svg');
  }

  #vs-top.LEVELUP2022 .vs-background-wrapper {
    background-image:
      url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-desktop-left.png'),
      url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-desktop-right.png');
    background-position:
      top left -120px,
      top right -120px;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media (min-width: 1536px) {
  #vs-top.LEVELUP2022 .vs-background-wrapper {
    background-position:
      top left,
      top right;
  }
}
